<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>其它结构伪类选择器</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			/* 选中没有任何内容的元素 */
			p:empty {
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			/*
				选中是唯一子元素的元素(独生子女)
			*/
			li:only-child {
				font-size: 50px;
				color: yellow;
				background-color: blue;
			}
			
			/* 选中html */
			:root {
				font-size: 50px;
			}

			p {
				font-size: 2rem;
			}

		</style>
	</head>
	<body>

		<p>1</p>
		<p>2</p>
		<p></p>
		<p>4</p>

		<ul>
			<li>hehe</li>
			<li>hehe</li>
			<li>hehe</li>
		</ul>
		<ul>
			<li>哈哈</li>
		</ul>
		
	</body>
</html>